<template>
	<view class="sjoppingcart">
		<view class="cu-list menu">
			<view class="cu-item">
				<view class="content">
					<button class="cutn round bg-green shadow" @tap="shutDown">关闭</button>
				</view>
				<!-- 	<view class="action">
					<button class="cutn round bg-green shadow" @tap="emptyShoppingCart">清空购物车</button>
				</view> -->
			</view>
		</view>
		<view v-if="ShoppingCartInformation == '' && Shopn == true " class="hei">
			<view class="text-grey">
				还没有添加菜品哦。。。
			</view>
		</view>
		<view v-else>
			<scroll-view class="VerticalNav bagcolor scrolls" scroll-y scroll-with-animation :scroll-top="verticalNavTop">
				<view class="cu-list menu-avatar" v-for="(item,index) in ShoppingCartInformation" :key='index'>
					<view class="cu-item cur">
						<view class="cu-avatar radius lg" v-for="itex in item.restItems">
							<view class=""></view>
							<image v-if="item.state =='1'" src="cloud://shiheji-5gkjlvup36de14c2.7368-shiheji-5gkjlvup36de14c2-1304241660/image/template.jpg"
							 mode=""></image>
							<image v-else :src="htp + itex.itemImg" mode=""></image>

						</view>
						<view class="contentsx">
							<view class="textleft">
								<text class="text-cut">{{item.mealName}}</text>
								<view class="cu-tag round bg-orange sm" v-if="item.state == '1' ">套餐</view>
								<view class="cu-tag round bg-orange sm" v-if="item.state == '2' ">单点</view>
								<view class="cu-tag round bg-orange sm" v-if="item.state == '3' ">轻食</view>
								<view class="cu-tag round bg-orange sm" v-if="item.state == '4' ">小吃</view>
								<view class="cu-tag round bg-orange sm" v-if="item.state == '5' ">饮品</view>
							</view>
							<view class="restItems" v-if="item.state =='1' ">
								<view class="cu-tag bg-orange sm mains" v-for=" itex in item.restItems"><text>{{itex.itemName}}</text></view>
							</view>
							<view class="text-gray text-sm flex"><text class="text-price text-red">{{item.primaryMoney}}</text></view>
						</view>
						<view class="action cu_btn">
							<view class="cu-btn round listGreen bg-white" @tap="Less(
						index,
						item.id,
						item.ids,
						item.foodIds,
						item.total,
						item.state,
						item.primaryMoney,
						item.mealName,
						item.timeType
						)">-</view>
							<text>{{item.number}}</text>
							<view class="cu-btn round bg-green" @tap="Plus(
						index,
						item.id,
						item.restItems,
						item.foodIds,
						item.total,
						item.state,
						item.primaryMoney,
						item.mealName,
					    item.timeType,
						)">+</view>
						</view>
					</view>
				</view>
				<view class="cu-list menu-avatar" v-for="(item,index) in taocanArr" :key='index' v-if="Shopn == false">
					<view class="cu-item cur">
						<view class="cu-avatar radius lg" style="background-image:url(htp);">
							<view class="cu-tag badge"></view>
						</view>
						<view class="content">
							<view class="content_top">
								<view class="cu-tag round bg-orange sm">套餐</view>
								<text class="taocan" v-for="itemson in item.arrSel" :key='itemson.index'>+{{itemson.foodName}}</text>
							</view>
							<view class="text-gray text-sm flex">
								<view class="text-price text-red">{{item.PackagePrice}}</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="nulls">

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				htp: 'https://www.iotry.net/',
				timeType: null,
				state: null,
				money: null,
				arrSel: null,
				taocanArr: [],
				Shopn: true,
				consult: null, //1加  2减
				modalName: null,
				foodId: '',
				modalName: null,
				number: '', //数量
				ShoppingCartInformation: '', //购物车信息
				openids: '', //openids
				totals: 0, //合计
				lists: [],
				isClick: true,
				isClicks: true
			}
		},
		beforeCreate() {},
		created() {
			// this.callBackx();
			this.openid();
			this.selectShoppingCa();
			this.dda();

		},
		onHide() {
			uni.setStorage({
				key: 'totals',
				data: this.totals
			})
		},
		computed: {

		},
		methods: {
			//查询购物车
			selectShoppingCa() {
				this.request.selectShoppingCat({
					oppenId: this.openids,
				}).then(res => {
					this.ShoppingCartInformation = res
				})
			},
			//加入购物车
			addShopping() {
				let timeType = this.timeType
				let state = this.state
				let openId = this.openids;
				let foodId = this.foodId;
				let consult = this.consult;
				let primaryMoney = this.money;
				let number = 1
				let lists = {
					"mealName": this.mealName,
					"timeType": timeType,
					"primaryMoney": primaryMoney,
					"state": state,
					"oppenId": openId,
					"foodId": foodId,
					"consult": consult,
					"number": number
				}
				let list = JSON.stringify(lists)
				this.request.addShop(
					list
				).then(res => {
					this.$parent.selectShoppingCat()
					this.$parent.TodaysDishesID()
					this.selectShoppingCa()
				})
				// this.modalName = null
			},
			//清空购物车
			emptyShoppingCart() {},
			//关闭传值
			shutDown() {
				this.modalName = null
				this.$emit('shut', null)
			},
			//加载时的金额
			dda() {
				let totals = uni.getStorageSync('totals')
			},
			//删除购物车信息
			remove(id) {
				this.request.remove({
					'ids': id
				}).then(res => {
					this.$parent.selectShoppingCat()
				})
			},
			//取消
			hideModal(e) {
				this.modalName = null
			},
			openid() {
				const openid = uni.getStorageSync('user');
				this.openids = openid
			},
			//加
			Plus(index, id, restItems, fodid, money, state, primaryMoney, mealName, timeType) {
				if (this.isClick) {
					this.isClick = false;
					setTimeout(() => {
						this.consult = 1
						var sun = 0
						this.foodId = id
						this.numbers = this.ShoppingCartInformation[index].number += 1
						sun = this.ShoppingCartInformation[index].itemPrice
						this.totals += sun
						this.mealName = mealName
						this.timeType = timeType
						this.state = state
						this.money = primaryMoney
						this.foodId = fodid
						
						this.consult = 1
						this.addShopping()
						this.isClick = true;
					}, 300); //一秒内不能重复点击
				}
			},
			//减
			Less(index, id, ids, fodid, money, state, primaryMoney, mealName, timeType) {
				if (this.isClicks) {
					this.isClicks = false;
					setTimeout(() => {
						this.consult = 2
						this.foodId = id
						this.numbers = this.ShoppingCartInformation[index].number -= 1
						var sun = 0
						sun = this.ShoppingCartInformation[index].itemPrice
						this.totals -= sun
						if (this.ShoppingCartInformation[index].number < 1) {
							this.remove(ids)
							this.ShoppingCartInformation.splice(index, 1)
						}
						this.mealName = mealName
						this.timeType = timeType
						this.state = state
						this.money = primaryMoney
						this.foodId = fodid
						this.consult = 2
						this.addShopping()
						this.isClicks = true;
					}, 150); //一秒内不能重复点击
				}
			},
		},
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}

	.checkbox {
		transform: scale(0.7);
	}

	.checkbox_lest {
		transform: scale(0.7);
		position: absolute;
		left: 19px;
		top: 22px;
	}

	.cu-list {
		margin-top: 0rpx;
	}

	.cu-list.menu-avatar>.cu-item .action[data-v-bfd085f4] {
		width: 144rpx;
		line-height: ;
	}

	.cu-btn[data-v-bfd085f4] {
		height: 60rpx;
		width: 60rpx;
	}

	.cu-list.menu-avatar>.cu-item {
		padding-right: 40rpx;
	}

	.cu-bar.tabbar.shop .action {
		width: 250rpx;
	}

	.cu-list.menu-avatar>.cu-item .action {
		width: 150rpx;
	}

	.cu_btn {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		height: 90rpx;
		align-items:center;
		-webkit-justify-content: space-around;
		justify-content: space-around;
	}

	.cu-btn {
		font-size: 40rpx;
		font-weight: 400;
		padding: 14rpx;
		height: 50rpx;
		border-radius: 0;
		line-height: 40rpx;
		width: 50rpx;
	}

	.listGreen {
		color: #39B54A;
		background-color: #FFFFFF;
		border: 1rpx solid #39B54A;
	}

	.text_btn {
		width: 88rpx;
		height: 56rpx;
		line-height: 56rpx;
		border-radius: 8rpx;
	}

	.cutn {
		padding: 10rpx;
		height: 49rpx;
		width: 204rpx;
		border-radius: 10rpx;
		font-size: 15px;
		line-height: 30rpx;
		border-radius: 10rpx;
	}

	button {
		margin: 0;
		padding: 0;
		outline: none;
		border-radius: 0;
		background-color: transparent;
		line-height: inherit;
		width: max-content;
	}

	button:after {
		border: none;
	}

	.padding-xl {
		background-color: #FFFFFF;
		padding: 30rpx;
	}

	.action_body {
		height: 70rpx;
		font-size: 35rpx;
		line-height: 70rpx;
		border-bottom: 1rpx solid #F2F2F2;
	}

	.cart {
		width: 96%;
		position: fixed;
		bottom: 20px;
		height: 45px;
		background: #1b1919;
		margin: auto;
		border-radius: 20px;
		left: 2%;
	}

	.cart image {
		width: 160rpx;
		position: absolute;
		bottom: 0;
		left: 5%;
	}

	.hei {
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		height: 500rpx;
	}

	.nulls {
		height: 150rpx;
		opacity: 0;
	}

	.SetMeal {
		height: auto;
		background-color: #FFFFFF;
		display: -webkit-box;
		display: -webkit-flex;
		padding: 20rpx 30rpx;
		display: flex;
	}

	.SetMeal_image>image {
		width: 96rpx;
		height: 96rpx;
	}

	.SetMeal_right {
		padding-left: 20rpx;
	}

	.text_wei {
		margin-top: 24rpx;
		text-align: left;
	}

	.SetMeal_right_text {
		font-size: 20rpx;
	}

	.taocan {
		font-size: 20rpx;
		font-weight: 500;
	}

	.content_top {
		width: 581rpx;
	}

	.restItems {
		height: 80rpx;
		display: flex;
		width: 440rpx;
		flex-wrap: wrap;
	}

	.contentsx {
		position: absolute;
		left: 146rpx;
		line-height: 50rpx;
	}

	.textleft {
		text-align: left;
	}

	.mains {
		margin: 5rpx 0;
	}

	.VerticalNav.nav {
		width: 100%;
		white-space: initial;
	}

	.VerticalNav.nav .cu-item {
		width: 100%;
		text-align: center;

		margin: 0;
		border: none;
		height: 180rpx;
		position: relative;
	}

	.VerticalNav.nav .cu-item.cur::after {
		content: "";
		width: 8upx;
		height: 30upx;
		border-radius: 10upx 0 0 10upx;
		position: absolute;
		background-color: currentColor;
		top: 0;
		right: 0upx;
		bottom: 0;
		margin: auto;
	}

	.scrolls {
		max-height: calc(100vh - 330upx)
	}
</style>
